<template>
    <!-- 纵向布局 -->
    <div
        :class="{
      fixed: fixedHeader,
      'no-tabs-bar': !showTabs,
      'collapse-layout':collapse
    }"
        class="vab-layout-vertical "
    >
        <vab-side-bar/>
        <div
            v-if="device === 'mobile' && !collapse"
            class="v-modal"
            @click="handleFoldSideBar"
        />
        <div
            :class="{
        'is-collapse-main': collapse,
      }"
            class="vab-main"
        >
            <div
                :class="{
          'fixed-header': fixedHeader,
        }"
                class="vab-layout-header"
            >
                <vab-nav/>
                <vab-tabs v-show="showTabs"/>
            </div>
            <vab-app-main/>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import {SettingMutationEnum} from '@/store/enum/store.enum';
import VabAppMain from '@/vab/components/VabAppMain/index';
import VabSideBar from '@/vab/components/VabSideBar/index';
import VabNav from '@/vab/components/VabNav/index';
import VabTabs from '@/vab/components/VabTabs/index';

@Component({components: {VabAppMain, VabSideBar, VabNav, VabTabs}})
export default class VabLayoutVertical extends Vue {
    @Prop({type: Boolean, default: false})
    private collapse;
    
    @Prop({type: Boolean, default: true})
    private fixedHeader;
    
    @Prop({type: Boolean, default: true})
    private showTabs;
    
    @Prop({type: String, default: 'desktop'})
    private device;
    
    private handleFoldSideBar() {
        this.$store.commit(SettingMutationEnum.foldSideBar)
    };
}
</script>

<style lang="scss" scoped>
.vab-layout-vertical {
    .fixed-header {
        left: $base-left-menu-width;
        width: $base-right-content-width;
    }
}
</style>
